<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>学员查询 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css?t=a1">
   <style>
      .el-header {
         background-color: #B3C0D1;
         color: #333;
         line-height: 60px;
      }

      .el-aside {
         color: #333;
      }

      html,
      body,
      #app,
      .el-container {
         padding: 0px;
         margin: 0px;
         height: 100%;
      }

      .my-layout-admin {
         position: fixed;
         top: 46px;
         left: 400px;
         right: 0px;
         bottom: 0px;
      }

      .mydmin-iframe {
         position: absolute;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
      }

      /* 菜单后面小三角的图标颜色 */
      .el-submenu__title i {
         color: #eee;
      }

      .el-tree-node__expand-icon.is-leaf {
         color: #c0c4cc;
         cursor: default;
         transform: rotate(90deg);
      }

      .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
         background-color: #fbe0e0; 
      }
   </style>
</head>

<body>
   <div id="app">

      <el-container style="height: 100%; border: 0px solid #eee;">
         <el-aside width="400px" style="background-color: #eee;border-right: 1px solid #ddd;">
            <div>
               <el-input placeholder="可选搜索内容(至少2个字)" v-model="searchData.name" size="small"
                  @keyup.enter.native="searchStudent">
                  <template slot="prepend">学员姓名:</template>
               </el-input>
               <el-input placeholder="可选搜索内容(至少6个字)" v-model="searchData.idcard" size="small"
                  @keyup.enter.native="searchStudent">
                  <template slot="prepend">身份证号:</template>
               </el-input>
               <el-input placeholder="可选搜索内容(至少4个字)" v-model="searchData.phone" size="small"
                  @keyup.enter.native="searchStudent">
                  <template slot="prepend">　手机号:</template>
               </el-input>
               <div style="text-align: center;margin-top: 5px;">
                  <el-button-group>
                     <el-button type="info" icon="el-icon-refresh-right" style="width: 150px;" size="small"
                        @click="resetSearchForm">重 置
                     </el-button>
                     <el-button type="primary" icon="el-icon-search" style="width: 150px;" size="small"
                        @click="searchStudent()">搜 索</el-button>
                  </el-button-group>
               </div>
               <div style="margin-top: 5px;overflow-y:auto;" :style="{height:treeHeight + 'px'}">
                  <el-tree v-loading="tableLoading" v-show="!showSearchTree" :data="orgTreeData" :props="defaultProps"
                     :load="loadTreeData" lazy highlight-current node-key="id" @node-click="handleNodeClick">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span v-if="data.type != 4">{{ node.label }}</span>
                        <span v-if="data.type == 4" style="color:#409eff;margin-left: -18px;"><i
                              class="el-icon-user-solid"></i>
                           {{data.name}} - {{data.orgcode}}</span>
                     </span>
                  </el-tree>
                  <el-tree v-loading="tableLoading" v-show="showSearchTree" :data="orgTreeSearchData"
                     :props="defaultProps" default-expand-all highlight-current node-key="id"
                     @node-click="handleNodeClick">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span v-if="data.type != 4">{{ node.label }}</span>
                        <span v-if="data.type == 4" style="color:#409eff;margin-left: -18px;"><i
                              class="el-icon-user-solid"></i>
                           {{data.name}} - {{data.orgcode}}</span>
                     </span>
                  </el-tree>
               </div>
            </div>
         </el-aside>

         <el-container>
            <el-main style="padding: 3px;">
               <el-tabs v-model="tabsValue" type="card">
                  <el-tab-pane :key="item.name" v-for="(item, index) in tabsData" :label="item.title" :name="item.name"
                     :closable="item.close">

                     <div class="my-layout-admin">
                        <iframe ref="myIframe" :src="item.content" frameborder="0" class="mydmin-iframe"></iframe>
                     </div>

                  </el-tab-pane>
               </el-tabs>
            </el-main>
         </el-container>
      </el-container>
   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="/js/my_util.js"></script>

<script>

   var marginHeight = 150; // 高差数


   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            treeHeight: window.innerHeight - marginHeight,                 // tree高，当窗口改变大小的时候通过 pageResize 修改该值
            tableLoading: false,       // 显示加载中
            sysconfig: {},             // 系统配置
            searchData: {},            // 搜索参数 
            orgTreeData: [],           // 机构树形数据
            orgTreeSearchData: [],     // 搜索结果树形数据
            showSearchTree: false,     // 显示搜索结果tree  
            tabsValue: 'study',

            // tree 控件配置
            defaultProps: {
               children: 'children',
               label: 'name',
               isLeaf: 'leaf',
            },

            // tab 数据
            tabsData: [{
               title: '学习记录',
               name: 'study',
               close: false,
               content: '/view/admin/student/iframe_study.html?t=' + uuid()
            },
            {
               title: '学员资料',
               name: 'info',
               close: false,
               content: '/view/admin/student/iframe_info.html?t=' + uuid()
            },
            {
               title: '驾驶证',
               name: 'driver',
               close: false,
               content: '/view/admin/student/iframe_driver.html?t=' + uuid()
            },
            {
               title: '从业资格证',
               name: 'qualification',
               close: false,
               content: '/view/admin/student/iframe_qualification.html?t=' + uuid()
            },
            {
               title: '安全学习合格证',
               name: 'certificate',
               close: false,
               content: '/view/admin/student/iframe_certificate.html?t=' + uuid()
            }],

         }
      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      computed: {
      },
      methods: {
         // 改变高度
         pageResize() {
            this.treeHeight = window.innerHeight - marginHeight;
         },

         // 选择tree中的项
         handleNodeClick(data) {
            if (data.type === 4) {
               // 由于有多个 iframe 。所以无法直接调用  this.$refs.myIframe.contentWindow.func() , 所以需要先获取当前显示的是哪个tab。
               // 获取tab的下标，然后再通过 this.$refs.myIframe[下标].contentWindow.func() 方式来调用 

               var index = -1;
               for (var i = 0; i < this.tabsData.length; i++) {
                  var obj = this.tabsData[i];
                  if (obj.name === this.tabsValue) index = i;
               }
               if (index > -1) {
                  this.$refs.myIframe[index].contentWindow.loadTableDataToCallback(data.student_id);
               }
            }
         },

         // 树形图加载下级数据
         loadTreeData(node, resolve) {
            // 获取下级数据
            let id = node.data != undefined ? node.data.id : 0;
            if (id > 0) {
               axios.get('/admin/student/' + id + '/show/sys_organ!pid.bu')
                  .then(function (response) {
                     if (response.data.code > 0) {
                        resolve(response.data.bundle);
                     } else if (response.data.code == 0) {
                        resolve([]);
                     } else {
                        vm.$message.error(response.data.msg);
                     }
                  })
                  .catch(function (error) {
                     vm.$message.error('获取数据失败！' + error);
                  })
            }
         },

         // 重置搜索表单
         resetSearchForm() {
            vm.$set(this.searchData, "name", "");
            vm.$set(this.searchData, "idcard", "");
            vm.$set(this.searchData, "phone", "");

            loadSysOrganDataBySessionMember(); // 读取当前管理员权限允许的树形数据列表
         },

         // 搜索学员
         searchStudent() {
            if (isNoNull(this.searchData.name) || isNoNull(this.searchData.idcard) || isNoNull(this.searchData.phone)) {
               vm.tableLoading = true;
               axios.post('/admin/student/show/student_info!search.bu', this.searchData)
                  .then(function (response) {
                     if (response.data.code > 0) {
                        console.log(response.data.bundle);

                        vm.orgTreeSearchData = response.data.bundle;

                        vm.showSearchTree = true;               // 显示搜索结果tree 
                     } else {
                        vm.$message.error(response.data.msg);
                     }
                     vm.tableLoading = false;
                  })
                  .catch(function (error) {
                     vm.$message.error('出错：' + error);
                     vm.tableLoading = false;
                  });
            } else {
               vm.$message.error("姓名，身份证，手机号至少填写一项");
            }
         },
      },
   });

   // 读取当前管理员权限允许的树形数据列表
   function loadSysOrganDataBySessionMember() {
      // 获取组织机构数据
      vm.tableLoading = true;
      axios.get('/admin/student/show/sys_organ!member_pid.bu')
         .then(function (response) {
            console.log(response.data);
            if (response.data.code > 0) {
               vm.orgTreeData = response.data.bundle;

               vm.showSearchTree = false;              // 显示正常tree 
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
            vm.tableLoading = false;
         })
         .catch(function (error) {
            vm.tableLoading = false;
            vm.$message.error('获取数据失败！' + error);
         });
   }

   // 初始化系统参数，管理员信息等
   function loadInitData() {

      // 管理员信息
      axios.get('/admin/sys/get_member_data.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.memberData = response.data.bundle;
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取登录信息失败！' + error);
         })

      // 获取系统配置信息
      axios.get('/guest/base/sysconfig.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.sysconfig = response.data.bundle;
            } else {
               vm.sysconfig = {};
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });


      // 读取参数信息至缓存
      axios.get('/admin/sys/get_option_params.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               sessionStorage.setItem('optionData', JSON.stringify(response.data.bundle));
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取菜单数据失败！' + error);
         })

   };


   loadInitData();                     // 初始化系统参数，管理员信息等
   loadSysOrganDataBySessionMember();  // 读取当前管理员权限允许的树形数据列表

</script>

</html>